<template>
	<view class="github-item mt20 bg-white" @tap="handleGithubDetail">
		<view class="item-content">
			<view class="item-title line1 md title-color">
				<label>{{ github.username }}</label>
				<label class="title-gap">/</label>
				<label>{{ github.reponame }}</label>
			</view>
			<view class="item-desc line2 mt20">{{ github.description }}</view>
			<view class="item-footer mt20 row">
				<image class="icon-sm" src="../../static/images/star.png"></image>
				<view class="meta-user-name meta-color mr20 sm ml10">{{ github.starCount }}</view>
				<image class="icon-sm" src="../../static/images/fork.png"></image>
				<view class="meta-user-name meta-color mr20 sm ml10">{{ github.forkCount }}</view>
				<view class="language-circle"></view>
				<view class="meta-user-name meta-color mr20 sm ml10">JAVA</view>
			</view>
		</view>
	</view>
</template>

<script>
import { timeago, dateChangeFormat } from '@/utils/tools.js';

export default {
	name: 'github-item',
	props: {
		github: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
	methods: {
		calTime(time) {
			return timeago(new Date(time).getTime());
		},
		handleGithubDetail() {
			window.open(this.github.url);
		}
	}
};
</script>

<style scoped lang="less">
.github-item {
	.item-content {
		padding: 20rpx;
		.title-gap {
			padding: 0 20rpx;
		}
		.title-color {
			color: #1e80ff;
		}
		.meta-color {
			color: #86909c;
		}
		.item-desc {
			line-height: 44rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
		}
		.language-circle {
			background-color: rgb(176, 114, 25);
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
		}
	}
}
</style>
